{{ header }}
<div id="account-return-apply" class="container">

    <div class="row">
        <div id="content" class="col-sm-12"> {{ content_top }}
            <h1 class="title">{{ heading_title }}</h1>
            <p class="subtitle">{{ text_description }}</p>
            <form action="{{ action }}" method="post" enctype="multipart/form-data" class="form-horizontal">
                <fieldset>
                    <legend>{{ text_order }}</legend>
                    <div class="form-group required">
                        <label class="col-sm-2 control-label" for="input-fullname">{{ entry_fullname }}</label>
                        <div class="col-sm-10">
                            <input type="text" name="fullname" value="{{ fullname }}" placeholder="{{ entry_fullname }}"
                                   id="input-fullname" class="form-control"/>
                                {#<div class="text-danger fullname"></div>#}
                        </div>
                    </div>
                    <div class="form-group required">
                        <label class="col-sm-2 control-label" for="input-email">{{ entry_email }}</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" value="{{ email }}" placeholder="{{ entry_email }}"
                                   id="input-email" class="form-control"/>
                            {#<div class="text-danger email"></div>#}
                        </div>
                    </div>
                    <div class="form-group required">
                        <label class="col-sm-2 control-label" for="input-telephone">{{ entry_telephone }}</label>
                        <div class="col-sm-10">
                            <input type="text" name="telephone" value="{{ telephone }}"
                                   placeholder="{{ entry_telephone }}" id="input-telephone" class="form-control"/>
                            {#<div class="text-danger telephone"></div>#}
                        </div>
                    </div>
                    <div class="form-group required hidden">
                        <label class="col-sm-2 control-label" for="input-order-id">{{ entry_order_id }}</label>
                        <div class="col-sm-10">
                            <input type="text" name="order_id" value="{{ order_id }}" placeholder="{{ entry_order_id }}"
                                   id="input-order-id" class="form-control"/>
                            {#<div class="text-danger order_id"></div>#}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="input-date-ordered">{{ entry_date_ordered }}</label>
                        <div class="col-sm-3">
                            <div class="input-group date">
                                <input type="text" name="date_ordered" value="{{ date_ordered }}"
                                       placeholder="{{ entry_date_ordered }}" data-date-format="YYYY-MM-DD"
                                       id="input-date-ordered" class="form-control"/>
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default">
                                        <img src="/catalog/view/theme/{{ helper.config('theme_default_directory') }}/image/icon/icon_riqi_black.svg" alt="">
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <legend>{{ text_product }}</legend>
                    <div class="form-group required">
                        <label class="col-sm-2 control-label" for="input-product">{{ entry_product }}</label>
                        <div class="col-sm-10">
                            <input type="text" name="product" value="{{ product }}" placeholder="{{ entry_product }}"
                                   id="input-product" class="form-control"/>
                            {#<div class="text-danger product"></div>#}
                        </div>
                    </div>
                    <div class="form-group required">
                        <label class="col-sm-2 control-label" for="input-model">{{ entry_model }}</label>
                        <div class="col-sm-10">
                            <input type="text" name="model" value="{{ model }}" placeholder="{{ entry_model }}"
                                   id="input-model" class="form-control"/>
                            {#<div class="text-danger model"></div>#}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="input-quantity">{{ entry_quantity }}</label>
                        <div class="col-sm-10">
                            <input type="text" name="quantity" value="{{ quantity }}" placeholder="{{ entry_quantity }}"
                                   id="input-quantity" class="form-control"/>
                            {#<div class="text-danger model"></div>#}
                        </div>
                    </div>
                </fieldset>


                <fieldset>
                    <legend>{{ text_type }}</legend>

                    <div class="form-group required">
                        <div class="col-sm-11 col-sm-push-1">
                            {% for return_action in return_actions %}

                            <div class="radio">
                                <label>
                                    <input type="radio" name="return_action_id" value="{{ return_action.return_action_id }}"/>
                                    {{ return_action.name }}
                                    <span class="radio-on"></span>
                                </label>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <legend>{{ entry_reason }}</legend>
                    <div class="form-group required">
                        <div class="col-sm-11 col-sm-push-1">
                            {% for return_reason in return_reasons %}
                                {% if return_reason.return_reason_id == return_reason_id %}
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="return_reason_id" value="{{ return_reason.return_reason_id }}" checked="checked"/>
                                            {{ return_reason.name }}
                                            <span class="radio-on"></span>
                                        </label>
                                    </div>
                                {% else %}
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="return_reason_id" value="{{ return_reason.return_reason_id }}"/>
                                            {{ return_reason.name }}
                                            <span class="radio-on"></span>
                                        </label>
                                    </div>
                                {% endif %}
                            {% endfor %}
                            {#<div class="text-danger return_reason_id"></div>#}
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-11 col-sm-push-1">
                            <textarea name="comment" rows="10" placeholder="{{ entry_fault_detail }}" id="input-comment" class="form-control">{{ comment }}</textarea>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                        <legend>{{ entry_opened }}</legend>

                    <div class="form-group required">
                        <div class="col-sm-11 col-sm-push-1">
                            <label class="radio-inline">
                                {% if opened %}
                                    <input type="radio" name="opened" value="1" checked="checked"/>
                                {% else %}
                                    <input type="radio" name="opened" value="1"/>
                                {% endif %}
                                {{ entry_unopened }}
                                <span class="radio-on"></span>
                            </label>
                            <label class="radio-inline">
                                {% if not opened %}
                                    <input type="radio" name="opened" value="0" checked="checked"/>
                                {% else %}
                                    <input type="radio" name="opened" value="0"/>
                                {% endif %}
                                {{ entry_unpacked }}
                                <span class="radio-on"></span>
                            </label>
                        </div>
                    </div>
                    {{ captcha }}
                </fieldset>
                {% if text_agree %}
                    <div class="form-group">
                        <div class="text-right col-sm-12">
                            {% if agree %}
                                <input type="checkbox" name="agree" value="1" checked="checked"/>
                            {% else %}
                                <input type="checkbox" name="agree" value="1"/>
                            {% endif %}
                            {{ text_agree }}
                        </div>
                    </div>
                {% endif %}
                <div class="form-group">
                    <div class="col-sm-12 text-right">
                        <input type="submit" value="{{ button_submit }}" class="btn btn-primary"/>
                    </div>
                </div>
            </form>
            {{ content_bottom }}</div>
        {{ column_right }}</div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" data-show="true"  data-backdrop="static" data-keyboard="false" id="account-return-apply-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">

                <div class="success-icon">
                    <img src="/catalog/view/theme/{{ helper.config('theme_default_directory') }}/image/icon/ok.svg" alt="">
                </div>

                <h3>{{ text_submit_success }}</h3>

                <p class="desc">{{ text_success_tips }}</p>
                <p class="contact">
                    <img src="/catalog/view/theme/{{ helper.config('theme_default_directory') }}/image/icon/icon_black_person.svg" alt="">
                    <span>{{ telephone }}</span>
                </p>

                <button type="button" class="confirm btn btn-primary">{{ text_confirm }}</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script type="text/javascript"><!--
    $('.date').datetimepicker({
        language: '{{ datepicker }}',
        pickTime: false
    });
    //-->
</script>

<script>

    $(function () {

        var $form =$('#account-return-apply form');
        var return_api = $form.prop('action');
        var $content = $("#account-return-apply");
        var $modal =$('#account-return-apply-modal');

        function serializeParms(){
            var form_data = {};
            $form.serializeArray().forEach(function (item) {
                    form_data[item['name']] = item['value'];
                });
            return form_data;
        }

        $content.delegate("input[type='submit']",'click', function (event) {
            event.preventDefault();
            var params = serializeParms();
            $.ajax({
                url: return_api,
                type: 'post',
                dataType: 'json',
                data: params,
                success: function(response) {
                    if(response.code !== 0) {
                        clearError();
                        showError(response.error);
                        $('body,html').animate({scrollTop: 0},300)
                    }else {
                        $modal.modal('show');
                    }
                },
                error: function (error) {
                    layer.open({
                        skin: 'jd-layui',
                        btnAlign: 'c',
                        title: ' ',
                        content: error.message
                    });
                }
            });
        });

        /**
         * 显示错误
         * @param errors 需要显示的错误信息数组
         */
        function showError(errors) {
            if(errors['warning']){
                var $alert = $('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i>'+errors['warning']+'</div>');
                $content.prepend($alert);
            }
            for(var name in errors){
                var $input =$('input[name="'+name+'"]');
                $input.parents('.col-sm-11, .col-sm-10').append('<div class="text-danger">'+errors[name]+'</div>');
                $input.parents('.form-group').addClass('has-error');
            }
        }

        /**
         * 清除错误
         * */
        function clearError() {
            $('.alert-danger').remove();
            $('.form-group').removeClass('has-error');
            $('.text-danger').remove();
        }

        $('button.confirm').click(function () {
            location.href="/index.php?route=account/return";
        });
    })
</script>
{{ footer }}
